
import 'package:flutter/material.dart';

import '../../custom_icon_button.dart';
import '../dialog_box_connect.dart';
import '../widgets/custom_banner.dart';

class HomePage extends StatefulWidget{

  HomePage({Key? key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>{

  bool state = false;

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
              pinned: true,
              snap: false,
              floating: false,
              expandedHeight: 180.0,
              backgroundColor: Colors.transparent,
              leading: Padding(
                  padding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                  child: CustomIconButton(
                    onPressed: (){
                      Navigator.of(context).push(TutorialOverlay());
                    },
                    image: AssetImage("images/find_connect_1.png"),
                    width: 34,
                    height: 34,
                    alignment: Alignment.topLeft,
                  )
              ),
              actions: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 16, 0),
                  child: CustomIconSwitch(
                    onPressed: (b){
                      setState((){
                        state = !b;
                      });
                    },
                    image: AssetImage("images/find_off.png"),
                    unselectImage: AssetImage("images/find_on.png"),
                    width: 34,
                    height: 34,
                    state: state,
                    alignment: Alignment.topRight,
                  ),
                )
              ],
              flexibleSpace: CustomBanner()
          ),
          SliverPadding(
            padding: const EdgeInsets.all(20),
            sliver: SliverGrid.count(
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: 3,
              children: <Widget>[
                Container(
                    padding: const EdgeInsets.all(8),
                    child: CustomIconButton(
                      image: AssetImage("images/icon_diy_1.png"),
                      onPressed: () {},
                    )
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: CustomIconButton(
                    image: AssetImage("images/icon_text_2.png"),
                    onPressed: () {},
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child:CustomIconButton(
                    image: AssetImage("images/icon_clock_3.png"),
                    onPressed: () {},
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child:CustomIconButton(
                    image: AssetImage("images/icon_clock_4.png"),
                    onPressed: () {},
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: CustomIconButton(
                    image: AssetImage("images/icon_stopwatch_5.png"),
                    onPressed: () {},
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: CustomIconButton(
                    image: AssetImage("images/icon_time_6.png"),
                    onPressed: () {},
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child:CustomIconButton(
                    image: AssetImage("images/icon_scores_7.png"),
                    onPressed: () {},
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: CustomIconButton(
                    image: AssetImage("images/icon_game_8.png"),
                    onPressed: () {},
                  ),
                )
              ],
            ),
          )
        ]
    );
  }

}